<!DOCTYPE html>
<html lang="en">
  <head>
    <title>KineticJS - performance example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="container" width="400" height="400"></div>
    This demo is using KineticJS 4.5.4 in order to compare performance to Rippl, the whole logic aside from the api is identical.

    <script src="./kinetic/kinetic.4.5.4.js"></script>
    <script>

      var stage = new Kinetic.Stage({
        container: "container",
        width: 400,
        height: 400
      });

      var layer = new Kinetic.Layer();

      stage.add(layer);

      var imageObj = new Image();
      imageObj.onload = function() {

        var i, limit = 2000;
        var sprites = [];

        for(i=0; i<limit; i+=1){

          var sprite = new Kinetic.Image({
            image: imageObj,
            x: 200 + (Math.random() - 0.5) * 400,
            y: 200 + (Math.random() - 0.5) * 400,
            opacity: 0.25,
            offset: {
              x: 64,
              y: 64
            },
            width: 128,
            height: 128
          });

          layer.add(sprite);
          sprites.push(sprite);
        }

        var fps, totalTime, lastTime = (new Date).getTime();
        var times = [0, 0, 0, 0, 0, 0];

        var counter = new Kinetic.Text({
          x: 10,
          y: 10,
          text: 'FPS: 0',
          fontSize: 20,
          fontStyle: 'bold',
          fontFamily: 'Arial',
          fill: '#000',
          shadowColor: '#fff',
          shadowBlur: 5
        });

        layer.add(counter);

        animation = new Kinetic.Animation(function(){
          var time = (new Date).getTime();
          times.shift();
          times.push(time - lastTime);
          lastTime = time;

          totalTime = 0;
          for(i=0; i<6; i+=1){
            totalTime += times[i];
          }

          fps = (Math.round(600000 / totalTime)) / 100;

          counter.setText("FPS: "+fps);

          var t = time / 1000;
          var sin = Math.sin(t * 4);

          var x = 1 + sin / 10;
          var y = 1 - sin / 10;

          for(i=0; i<limit; i+=1){
            sprites[i].setScale(x, y);
          }
        }, layer);

        animation.start();
      }

      imageObj.src = 'img/html5.png';

    </script>
  </body>
</html>